<template>
	<view>
		<view class="itemls" @click="gotofw(data.id)">
			<view class="le">
				<!-- <image src="/static/tp.png" mode=""></image> -->
				<image :src="data.serviceCarousel[0].url | avatarfilter" mode=""></image>
			</view>
			<view class="ri">
				<!-- <text class="ric">{{data.serviceName}}</text> -->
				<rich-text :nodes="data.serviceName" class="ric"></rich-text>
				<rich-text :nodes="data.remark" class="jj"></rich-text>
				<!-- <text class="jj">{{data.remark}}</text> -->
				<view class="sij">
					<view class="pt" v-if="flag">
						<text>上门费￥6</text>
						<text style="color: #7c7c7c;margin: 0px 2px;">|</text>
						<text style="color: #db9c25;">极速上门</text>
					</view>


					<text class="ptt" v-else>最快30分钟上门</text>
				</view>
				<view class="price">
				
					<text class="pr">{{data.price[0]|parentInt}}</text>
					<text class="dww">元/次</text>
				</view>
				<view class="xz">
					<view class="leff">
						<!-- <text class="dw">到位直选></text> -->
					</view>

					<view class="rig" >
						<text class="ys">已售999+</text>
						<text class="hp">好评97%</text>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		base_Url
	} from '../../utils/Url';
	export default {
		props: {
			ids: { // v-model 默认传递的 prop 名称是 value
				type: String,
				required: true
			},
			data: {
				type: Object
			}
		},
		data() {
			return {
				flag: false,
				service: {

				},
				pageNo: 0,
				pageSize: 10,
			}
		},
		mounted() {
			console.log("信息", this.ids);
			console.log("信息2", this.data);
			// this.getservcieAndservice(this.ids)

		},
		filters: {
			avatarfilter(e) {
				// console.log('数据', e);
				const originalUrl = e
				const updatedUrl = originalUrl.replace(/^http:\/\/127\.0\.0\.1:8080/, base_Url);
				// console.log("adada", updatedUrl);
				return updatedUrl
				// return e
			},
			parentInt(e) {
				let result = e.replace(/"/g, '');
				return result
			}
		},
		methods: {

			gotofw(e) {
				console.log("随即", e);
				this.$toPage("/components/goods/goods", "id", e)
			}
		}
	}
</script>

<style lang="less">
	.itemls {
		display: flex;
		justify-content: space-between;
		margin: 4px 8px;
		background-color: #ffffff;
		padding: 8px;
		border-radius: 8px;

		.le {
			image {
				width: 108px;
				height: 108px;
				border-radius: 8px;
			}
		}
	}

	.ri {
		display: flex;
		flex-direction: column;
		margin-left: 10px;
		margin-right: 28px;

		.ric {

			font-size: 16px;
			font-weight: bold;
		}

		.jj {
			width: 250px;
			white-space: nowrap;
			/* 禁止换行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;
			/* 超出部分显示省略号 */
			font-size: 14px;
			color: #7c7c7c;
		}

		.sij {
			.pt {
				display: flex;
				font-size: 12px;

			}

			.ptt {
				font-size: 12px;
				color: #db9c25;
			}
		}

		.price {
			margin-top: 8px;
			color: #e34236;

			.pr {
				font-weight: bold;
			}

			.dww {
				margin-left: 2px;
				font-size: 13px;
			}
		}

		.xz {
			display: flex;
			justify-content: space-between;

			.leff {
				.dw {
					font-size: 13px;
					color: #2d2d2d;
				}
			}

			.rig {
				font-size: 13px;
				color: #7c7c7c;
				margin-top: 8px;

				.ys {}

				.hp {
					margin-left: 6px;
				}

			}
		}



	}
</style>